<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage">
    <div class="aui-header-1">
        <lv-group lvGutter='8px'>
            <h1>{{'system_external_storage_label' | i18n}}</h1>
            <aui-multi-cluster-switch (onChange)="onChange()"></aui-multi-cluster-switch>
        </lv-group>
    </div>
    <div class="aui-block aui-paginator-container">
        <div class="aui-operation">
            <lv-group>
                <button lvType="primary" lv-button (click)="addStorage()" [disabled]="total >= 64" pmpermission
                    pmOperation='AddingExternalStorage'>
                    {{'common_add_external_storage_label' | i18n}}
                </button>
            </lv-group>
            <lv-group lvGutter="8px">
                <lv-search [lvFocus]="true" [(ngModel)]="deviceName" (lvSearch)="searchByDeviceName()"
                    lvPlaceHolder="{{'common_search_type_label'|i18n:['common_storage_label'|i18n]}}">
                </lv-search>
                <button class="aui-button-icon" lv-button lvSize="auto" (click)="getStorages()">
                    <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
                </button>
            </lv-group>
        </div>
        <div class="list-container">
            <lv-datatable [lvData]='tableData' #lvTable lvResize lvAsync [lvPaginator]="page"
                [lvScroll]='virtualScroll.scrollParam'>
                <thead>
                    <tr>
                        <ng-container *ngFor="let col of columns">
                            <th [lvShowFilter]="col.filter" (lvFilterChange)="filterChange($event)"
                                [attr.width]="col.width" [(lvFilters)]="col.filterMap" lvCellKey="{{ col.key }}"
                                [lvShowSort]="col.showSort" lvShowCustom lvFilterCheckAll>
                                {{col.label}}
                                <div lvCustom *ngIf="col.key === 'deviceName'">
                                    <i #deviceNamePopover="lvPopover" lv-icon="lv-icon-search" [lvColorState]="true"
                                        [ngClass]="{ active: !!deviceName }" lv-popover
                                        [lvPopoverContent]="deviceNameFilterTpl"
                                        lvPopoverPosition="bottom" lvPopoverTrigger="click"></i>
                                </div>
                                <div lvCustom *ngIf="col.key === 'ip'">
                                    <i #ipPopover="lvPopover" lv-icon="lv-icon-search" [lvColorState]="true"
                                        [ngClass]="{ active: !!ip }" lv-popover [lvPopoverContent]="ipFilterTpl"
                                         lvPopoverPosition="bottom" lvPopoverTrigger="click"></i>
                                </div>
                                <div lvCustom *ngIf="col.key === 'type'">
                                    <i #typePopover="lvPopover" lv-icon="lv-icon-search" [lvColorState]="true"
                                        [ngClass]="{ active: !!type }" lv-popover [lvPopoverContent]="typeFilterTpl"
                                         lvPopoverPosition="bottom" lvPopoverTrigger="click"></i>
                                </div>
                                <div lvCustom *ngIf="col.key === 'wwn'">
                                    <i #wwnPopover="lvPopover" lv-icon="lv-icon-search" [lvColorState]="true"
                                        [ngClass]="{ active: !!wwn }" lv-popover [lvPopoverContent]="wwnFilterTpl"
                                         lvPopoverPosition="bottom" lvPopoverTrigger="click"></i>
                                </div>
                                <div lvCustom *ngIf="col.key === 'esn'">
                                    <i #esnPopover="lvPopover" lv-icon="lv-icon-search" [lvColorState]="true"
                                        [ngClass]="{ active: !!esn }" lv-popover [lvPopoverContent]="esnFilterTpl"
                                         lvPopoverPosition="bottom" lvPopoverTrigger="click"></i>
                                </div>
                            </th>
                        </ng-container>
                        <th width='140px'>
                            {{'common_operation_label' | i18n}}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <ng-container *ngFor="let item of lvTable.renderData">
                        <tr>
                            <ng-container *ngFor="let col of columns">
                                <td>
                                    <ng-container [ngSwitch]="col.key">
                                        <ng-container *ngSwitchCase="'status'">
                                            <aui-status [value]='item.status' type='External_Storage_Status'></aui-status>
                                        </ng-container>
                                        <ng-container *ngSwitchDefault>
                                            <span lv-overflow>
                                                {{item[col.key] | nil}}
                                            </span>
                                        </ng-container>
                                    </ng-container>
                                </td>
                            </ng-container>
                            <td width='140px'>
                                <lv-operation-menu [lvItemsFn]="optsCallback" [lvData]="item">
                                </lv-operation-menu>
                            </td>
                        </tr>
                    </ng-container>
                </tbody>
            </lv-datatable>
        </div>
        <div class="aui-paginator-wrap">
            <lv-paginator [lvPageSizeOptions]='sizeOptions' [lvTotal]='total' [lvPageIndex]='startPage'
                [lvPageSize]='pageSize' #page [hidden]='!total' (lvPageChange)="storagePageChange($event)">
            </lv-paginator>
        </div>
    </div>
</div>

<ng-template #deviceNameFilterTpl>
    <lv-search [(ngModel)]="deviceName" (lvSearch)="searchByDeviceName($event)" [lvFocus]="true"></lv-search>
</ng-template>

<ng-template #ipFilterTpl>
    <lv-search [(ngModel)]="ip" (lvSearch)="searchByIp($event)" [lvFocus]="true"></lv-search>
</ng-template>

<ng-template #typeFilterTpl>
    <lv-search [(ngModel)]="type" (lvSearch)="searchByType($event)" [lvFocus]="true"></lv-search>
</ng-template>

<ng-template #wwnFilterTpl>
    <lv-search [(ngModel)]="wwn" (lvSearch)="searchByWwn($event)" [lvFocus]="true"></lv-search>
</ng-template>

<ng-template #esnFilterTpl>
    <lv-search [(ngModel)]="esn" (lvSearch)="searchByEsn($event)" [lvFocus]="true"></lv-search>
</ng-template>
